<dev xmlns="http://www.w3.org/1999/xhtml"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:c="http://java.sun.com/jsp/jstl/core"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:p="http://primefaces.org/ui">

    <c:set var="root" value="#{request.contextPath}" />

    <ui:composition template="../template/common.xhtml" >
        <ui:define name="topComponents">
            <c:set var="activeItem" value="usersPage"/>
            <ui:include src="../navigator.xhtml" />
        </ui:define>
        <ui:define name="content">
            <div class="span8">
                <div class="well">
                    <h:form id="usersForm">
                        <p:dataTable value="#{browseAccessUserCtrl.dataModel}" styleClass="" var="usr" selection="#{browseAccessUserCtrl.selectedUser}" selectionMode="single">
                            <f:facet name="header">
                                <h:outputText value="Users" />
                            </f:facet>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="ID" />
                                </f:facet>
                                <h:outputText value="#{usr.id}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="User name" />
                                </f:facet>
                                <h:outputText value="#{usr.name}"/>
                            </p:column>
                            <p:ajax event="rowSelect" listener="#{browseAccessUserCtrl.onRowSelect}" update=":groupsForm:groupUserIn"></p:ajax>
                        </p:dataTable>
                        <p:commandButton action="#{groupUserInCtrl.delete()}"  value="Delete" />
                        <p:commandButton action="userEditPage"  value="Edit" />
                    </h:form>
                </div>
            </div>
            <div class="span4">
                <div class="well">
                    <h:form id="groupsForm">
                        <p:dataTable id="groupUserIn" value="#{groupUserInCtrl.dataModel}" var="group" selection="#{groupUserInCtrl.selectedGroups}" >
                            <p:column selectionMode="multiple" style="width:2%" />  
                            <f:facet name="header">
                                <h:outputText value="Group" />
                            </f:facet>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="ID" />
                                </f:facet>
                                <h:outputText value="#{group.id}"/>
                            </p:column>
                        </p:dataTable>
                        <p:commandButton action="#{groupUserInCtrl.update()}" value="Apply" />
                    </h:form>
                </div>
            </div>
            <div class="span10">
                <p:messages id="updateMessages" showDetail="true" autoUpdate="true" closable="true" /> 
            </div>
        </ui:define>
    </ui:composition>
</dev>
